import { useState } from 'react';
import moment from 'moment';
import { Table, Modal, Button } from 'antd';
import { InbizIcon } from '@inbiz/utils';
import Paginations from './Paginations';
import { TextWidget, getMessage } from '@inbiz/react';
import { observer } from '@formily/react';
import { cencelAssign } from '../../service';
import { afterOperation, clickRow } from '../../utils';
import './index.less';

const dataFormat = 'YYYY-MM-DD HH:mm:ss';

export default observer((props: any) => {
  const {
    dataSource,
    visible,
    $visible,
    getList1,
    getList2,
    choosedTabKey,
    pageData,
    userInfo,
    setLoading,
    loading,
    _pageData,
    list,
    searchApplyList,
    initQuerySelect,
    $condition,
    $applyList,
    applyCatogory,
  } = props;
  const [selectedRowKeys, $selectedRowKeys] = useState([]);
  const columns = [
    {
      title: getMessage('processCenter.instanceNumber'),
      dataIndex: 'processInstanceId',
    },
    {
      title: getMessage('processCenter.processName'),
      dataIndex: 'processName',
      ellipsis: true,
    },
    {
      title: getMessage('processCenter.taskName'),
      dataIndex: 'stepName',
      width: 150,
      ellipsis: true,
    },
    {
      title: getMessage('processCenter.starter'),
      dataIndex: 'initiatorName',
    },
    {
      title: getMessage('processCenter.assigner'),
      dataIndex: 'Assignment',
    },
    {
      title: getMessage('processCenter.starttime'),
      width: 200,
      dataIndex: 'taskCreateTime',
      ellipsis: true,
      render: (text) => moment(text).format(dataFormat),
    },
  ];

  const queryList = (page, pageSize) => {
    $selectedRowKeys([]);
    getList2(page, pageSize, '1', '', {
      processGroupName: '',
      processDefId: '',
      date: '',
      status: '',
    });
  };
  const removeAssignItems = (type: number) => {
    if (type == 1) {
      if (selectedRowKeys.length == 0) {
        return Modal.info({
          title: getMessage('processCenter.modalTiptitle'),
          content: getMessage('processCenter.selectRecord'),
          okText: getMessage('processCenter.known'),
        });
      }
    }
    Modal.confirm({
      title: getMessage('processCenter.modalTiptitle'),
      content: getMessage('processCenter.confirmTocancel'),
      okText: getMessage('global.sure'),
      cancelText: getMessage('global.cancel'),
      onOk: () => {
        const params = {
          assignee: userInfo?.ID,
        };
        if (type == 1) {
          params.delegateIds = selectedRowKeys.join(',');
        } else {
          params.allDelegate = true;
        }
        cencelAssign(params).then((res) => {
          afterOperation(res, () => {
            queryList(1, pageData.pageSize);
          });
        });
      },
    });
  };

  const onChange = (selectedRowKeys) => {
    $selectedRowKeys(selectedRowKeys);
  };

  return (
    <Modal
      title={getMessage('processCenter.assignedTask')}
      className="assigned"
      onCancel={async () => {
        $visible(false);
        $selectedRowKeys([]);
        setLoading(true);
        await initQuerySelect();
        await getList1(
          list?.length == 1 && _pageData.pageIndex != 1
            ? _pageData.pageIndex - 1
            : _pageData.pageIndex,
          _pageData.pageSize,
          choosedTabKey,
          '',
          {
            processGroupName: '',
            processDefId: '',
            date: '',
            status: '',
          },
        );
        setLoading(false);
      }}
      centered
      footer={null}
      destroyOnClose
      visible={visible}
    >
      <Button onClick={() => removeAssignItems(1)} style={{ marginRight: 15 }}>
        <InbizIcon type="icon-process-a-zu1944" />
        <TextWidget>processCenter.cancelassignedTask</TextWidget>
      </Button>
      <Button onClick={() => removeAssignItems(2)} style={{ marginBottom: 10 }}>
        <InbizIcon type="icon-process-a-zu1944" />
        <TextWidget>processCenter.cancelallTask</TextWidget>
      </Button>
      <Table
        loading={loading}
        dataSource={dataSource}
        columns={columns}
        rowKey="Id"
        rowSelection={{
          onChange,
          selectedRowKeys,
        }}
        onRow={(record) => {
          return {
            onClick: () => clickRow(record, { onChange, selectedRowKeys }, true),
          };
        }}
        scroll={{ y: 235 }}
        pagination={false}
      />
      {dataSource.length > 0 && <Paginations pageData={pageData} queryList={queryList} />}
    </Modal>
  );
});
